মৌলিক HTML উদাহরণ
এই অধ্যায়ে আমরা কিছু মৌলিক HTML উদাহরণ দেখাব।
চিন্তা করবেন না যদি আমরা ট্যাগ ব্যবহার করি যা আমরা এখনও শিখিনি।
HTML নথি
সমস্ত HTML নথি একটি নথি প্রকার ঘোষণা দিয়ে শুরু করা আবশ্যক:<!DOCTYPE html>.
এইচটিএমএল ডকুমেন্ট নিজেই<html>দিয়ে শুরু</html>দিয়ে শেষ হয়
একটি HTML নথির দৃশ্যমান অংশ<body>এবং</body>মধ্যে হয়
উদাহরণ
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html><!DOCTYPE> ঘোষণা
<!DOCTYPE>ঘোষণাটি নথির প্রকার নির্দেশ করে এবং ব্রাউজারগুলিকে ওয়েব পৃষ্ঠাগুলি সঠিকভাবে প্রদর্শন করতে সহায়তা করে৷
এটি পৃষ্ঠার শীর্ষে (যেকোনও HTML ট্যাগের আগে) শুধুমাত্র একবার উপস্থিত হওয়া উচিত।
<!DOCTYPE>ঘোষণাটি কেস-সংবেদনশীল নয়।
HTML5 এর জন্য<!DOCTYPE>বিজ্ঞপ্তি:
<!DOCTYPE html>পরামর্শ:
সর্বদা আপনার HTML ফাইলের প্রথম লাইন হিসাবে<!DOCTYPE html>যোগ করুন i. এটি ব্রাউজারকে বলে যে এটি একটি HTML5 নথি।
এইচটিএমএল হেডার
এইচটিএমএল হেডার<h1>প্রথম<h6>ট্যাগ পর্যন্ত দ্বারা সংজ্ঞায়িত করা হয়.
<h1>সবচেয়ে গুরুত্বপূর্ণ বিষয় সংজ্ঞায়িত করে।<h6>সর্বনিম্ন গুরুত্বপূর্ণ বিষয় সংজ্ঞায়িত করে:
উদাহরণ
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3><h1> - প্রধান শিরোনাম
পৃষ্ঠার প্রধান শিরোনাম। একটি পৃষ্ঠায় সাধারণত একটি <h1> থাকা উচিত।
<h2> - <h6>
. <h2> বেশি গুরুত্বপূর্ণ, <h6> কম গুরুত্বপূর্ণ।
এইচটিএমএল কলাম
এইচটিএমএল কলাম<p>ট্যাগ দ্বারা সংজ্ঞায়িত করা হয়:
উদাহরণ
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>দ্রষ্টব্য:
অনুচ্ছেদে পাঠ্য বিভক্ত করুন<p>ট্যাগ ব্যবহার করুন। প্রতিটি নতুন অনুচ্ছেদের জন্য একটি নতুন<p>ট্যাগ করা শুরু করুন।
এইচটিএমএল লিঙ্ক
এইচটিএমএল লিঙ্ক<a>ট্যাগ দ্বারা সংজ্ঞায়িত করা হয়:
উদাহরণ
<a href="https://www.jassifteam.com">This is a link</a>সংযোগের লক্ষ্যhrefবৈশিষ্ট্যে উল্লেখ করা হয়েছে।
HTML উপাদান সম্পর্কে অতিরিক্ত তথ্য প্রদানের জন্য বৈশিষ্ট্যগুলি ব্যবহার করা হয়।
আপনি পরবর্তী অধ্যায়ে গুণাবলী সম্পর্কে আরও শিখবেন।
লিঙ্ক ট্যাগ
<a href="URL">লিঙ্ক টেক্সট</a>৷
href বৈশিষ্ট্য
লিঙ্কের গন্তব্য URL নির্দিষ্ট করে
এইচটিএমএল ছবি
এইচটিএমএল ছবি<img>ট্যাগ দ্বারা সংজ্ঞায়িত করা হয়.
উৎস ফাইল (src), অল্ট টেক্সট (alt), প্রস্থ (width), এবং উচ্চতা (height) বৈশিষ্ট্য হিসাবে দেওয়া হয়:
উদাহরণ
<img src="jassifteam.jpg" alt="Jassif Team Logo" width="104" height="142">দ্রষ্টব্য:
altবৈশিষ্ট্য যখন চিত্রটি দৃশ্যমান না হয় বা চিত্রটি লোড না হয় তখন প্রদর্শনের জন্য বিকল্প পাঠ্য সরবরাহ করে। এটি অ্যাক্সেসযোগ্যতার জন্য গুরুত্বপূর্ণ।
HTML সোর্স কোড দেখার একটি উপায়
আপনি কি কখনও একটি ওয়েব পৃষ্ঠা দেখেছেন এবং ভেবেছেন "আরে! তারা কীভাবে এটি করেছে?" আপনি কি কখনও যে বিস্মিত?
HTML সোর্স কোড দেখুন
একটি HTML পৃষ্ঠায় CTRL + U ক্লিক করুন বা পৃষ্ঠাটিতে ডান ক্লিক করুন এবং "পৃষ্ঠা উত্স দেখুন" নির্বাচন করুন। এটি পৃষ্ঠার HTML সোর্স কোড সহ একটি নতুন ট্যাব খুলবে।
HTML উপাদান পরীক্ষা করুন
একটি উপাদানের উপর ডান-ক্লিক করুন (বা একটি খালি এলাকায়), "পরিদর্শন" নির্বাচন করুন এবং দেখুন কোন উপাদানগুলি তৈরি করা হয়েছে (আপনি HTML এবং CSS উভয়ই দেখতে পাবেন)৷ আপনি HTML বা CSS সম্পাদনা করতে পারেন যা এলিমেন্টস বা স্টাইল প্যানেলে খোলে।
উন্নয়ন টুল:
পৃষ্ঠায় ডান-ক্লিক করুন এবং "পরিদর্শন" বা F12 কী টিপুন। এটি ব্রাউজার ডেভেলপমেন্ট টুল খুলবে যাতে আপনি রিয়েল-টাইমে HTML এবং CSS দেখতে এবং সম্পাদনা করতে পারেন।